<template>
  <div>
    <div class="indexTopBox">
      <div class="indexTopC1ExBox" v-if="c1">
        <div class="indexTopC1Box flex">
          <div class="indexTopCLBox flex f-s" @click="getCity()">
            <span class="indexTopCLText1">所在城市：</span>
            <span class="indexTopCLText2">北京朝阳区</span>
            <img class="indexTopCLText2Img" src="../../assets/zfc/展开符.png" alt="" />
          </div>
          <div class="indexTopCRBox flex f-e">
            <span class="indexTopCRText">您好，</span>
            <span class="indexTopCRTextUserId">17701269859</span>
            <span class="indexTopCRText">退出</span>
            <span class="indexTopCRHr"></span>
            <span class="indexTopCRText">我的订单</span>
            <span class="indexTopCRHr"></span>
            <span class="indexTopCRText">我的消息</span>
            <span class="indexTopCRHr"></span>
            <span class="indexTopCRText">我是商家</span>
            <span class="indexTopCRHr"></span>
            <img class="indexTopCRImg" src="../../assets/zfc/消息.png" alt="" />
            <span class="indexTopCRText">400-800-8820</span>
          </div>
        </div>
      </div>
      <div class="indexTopC2Box" v-if="c2">
        <div class="logoBox">
          <img src="../../assets/zfc/logo.png" alt="" />
        </div>
        <div class="inputBox">
          <div class="inputK flex">
            <input class="inputBt" type="text" placeholder="请输入关键字进行搜索" />
            <div class="inputBtn flex">
              <img src="../../assets/zfc/搜索图标.png" alt="" />
            </div>
          </div>
          <div class="inputTextBox">
            <span class="inputTextH">热门：</span>
            <span class="inputText" v-for="(v, k) in hot" :key="k + 'hot'">
              {{ v }}
            </span>
          </div>
        </div>
        <div class="btnsBox">
          <div class="flex">
            <div class="userBtnBox flex" @click="goMyAccount()">
              <img class="userBtnImg" src="../../assets/zfc/个人中心图标.png" alt="" />
              <span class="f14c6">个人中心</span>
            </div>
            <div class="gwcBtnBox flex" @click="goGwc()">
              <img class="gwcBtnImg" src="../../assets/zfc/购物车图标.png" alt="" />
              <span class="f14c6">购物车</span>
              <div class="BubbleBox">
                <div class="BubbleTextBox flex">{{ gwcNum }}</div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="indexTopC3Box flex" v-if="c3">
        <div class="fl flex" @click="flTagArrOn()">
          <span class="f16c3">全部分类</span>
          <img class="flImg" src="../../assets/zfc/下拉展开符.png" alt="" />
          <div class="flBorder"></div>
          <div class="flTagBox" v-if="flTagArrFalg" @click.stop>
            <div class="flTagItem flex" v-for="(v, k) in flTagArr" :key="k + 'flTagArr'">
              <img class="flTagItemImg" :src="v.tagImgUrl" alt="" />
              <span class="f16c3">{{ v.tagName }}</span>
            </div>
          </div>
        </div>
        <div
          class="tagItem flex"
          :class="{ tagBoxOn: v.falg }"
          v-for="(v, k) in tagArr"
          :key="k + 'indexArr'"
          @click="tagOn(k)"
        >
          <span class="f16c3" :class="{ tagBoxOn: v.falg }">{{ v.tagName }}</span>
          <div class="tagBorder" v-if="k != tagArr.length - 1"></div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "IndexTop",
  mounted() {
    console.log(this.$store.state.gwcNum);
  },
  props: {
    c1: {
      default: true,
    },
    c2: {
      default: true,
    },
    c3: {
      default: true,
    },
  },
  data() {
    return {
      hot: ["奇异果", "牛排", "山竹", "牛油果"],
      gwcNum: this.$store.state.gwcNum,
      tagArr: this.$store.state.tagArr,
      flTagArrFalg: false,
      flTagArr: [
        {
          tagName: "新鲜水果",
          tagImgUrl: require("../../assets/zfc/水果.png"),
          falg: false,
        },
        {
          tagName: "生猛海鲜",
          tagImgUrl: require("../../assets/zfc/海鲜.png"),
          falg: false,
        },
        {
          tagName: "肉类家禽",
          tagImgUrl: require("../../assets/zfc/肉食.png"),
          falg: false,
        },
        {
          tagName: "蛋奶素食",
          tagImgUrl: require("../../assets/zfc/蛋奶.png"),
          falg: false,
        },
        {
          tagName: "田园蔬菜",
          tagImgUrl: require("../../assets/zfc/果蔬.png"),
          falg: false,
        },
        {
          tagName: "零食酒水",
          tagImgUrl: require("../../assets/zfc/零食.png"),
          falg: false,
        },
        {
          tagName: "粮油杂货",
          tagImgUrl: require("../../assets/zfc/粮油.png"),
          falg: false,
        },
        {
          tagName: "礼品卡劵",
          tagImgUrl: require("../../assets/zfc/礼品.png"),
          falg: false,
        },
        {
          tagName: "家具用品",
          tagImgUrl: require("../../assets/zfc/家具.png"),
          falg: false,
        },
      ],
    };
  },
  methods: {
    tagOn(k) {
      this.$store.commit("setTagArrItem", k);
    },
    flTagArrOn() {
      this.flTagArrFalg = !this.flTagArrFalg;
    },
    goMyAccount() {
      if (this.$route.push != "/myaccount") {
        this.$router.push({ path: "/myaccount" });
      }
    },
    goGwc() {
      if (this.$route.name != "Shopping-Cart-con") {
        this.$router.push({ name: "Shopping-Cart-con" });
      }
    },
  },
};
</script>

<style scoped>
* {
  font-size: 0;
  color: #333333;
}
.f-s {
  justify-content: flex-start;
}
.f-e {
  justify-content: flex-end;
}
.disi-b {
  display: inline-block;
}
.f14c6 {
  font-size: 14px;
  color: #666666;
}
.f16c3 {
  font-size: 16px;
  color: #333333;
}
</style>

<style scoped>
.indexTopBox {
  width: 100%;
}
/* 每行通用样式 */
.indexTopC1Box,
.indexTopC2Box,
.indexTopC3Box {
  width: 1280px;
  margin: 0 auto;
}
/* 顶部第一行 */
.indexTopC1ExBox {
  width: 100%;
  height: 36px;
  background-color: #eeeeee;
}
.indexTopC1Box {
  height: 36px;
  margin: 0 auto;
  background-color: #eeeeee;
  justify-content: space-between;
}
/* 左侧内容 */
.indexTopCLBox {
  width: 170px;
  height: 100%;
  cursor: pointer;
}
.indexTopCLText1,
.indexTopCLText2 {
  line-height: 14px;
  font-size: 14px;
  color: #666666;
}
.indexTopCLText2Img {
  margin-left: 5px;
}
/* 右侧内容 */
.indexTopCRBox {
  width: 640px;
}
.indexTopCRText,
.indexTopCRTextUserId {
  line-height: 14px;
  font-size: 14px;
  color: #666666;
}
.indexTopCRTextUserId {
  margin-right: 13px;
  color: #4b943d;
}
.indexTopCRImg {
  margin-right: 6px;
}
.indexTopCRHr {
  width: 1px;
  height: 14px;
  margin: 0 13px;
  background-color: #999999;
}
/* 顶部第二行 */
.indexTopC2Box {
  height: 130px;
}
.indexTopC2Box > * {
  vertical-align: top;
}
/* logo */
.logoBox {
  display: inline-block;
  width: 370px;
  height: 66px;
  margin-top: 24px;
  margin-right: 102px;
}
/* 搜索框 */
.inputBox {
  display: inline-block;
  width: 498px;
  height: 100%;
  margin-right: 40px;
}
.inputK {
  width: 100%;
  margin-top: 49px;
  flex-wrap: wrap;
  justify-content: flex-start;
}
.inputBt {
  width: 456px;
  height: 36px;
  border: none;
  border-top: 2px solid #4b943d;
  border-left: 2px solid #4b943d;
  border-bottom: 2px solid #4b943d;
  outline: none;
  font-size: 14px;
  text-indent: 10px;
}
.inputBt::placeholder {
  color: #999999;
}
.inputBtn {
  width: 40px;
  height: 40px;
  background-color: #4b943d;
  cursor: pointer;
}
/* 热门 */
.inputTextBox {
  margin-top: 3px;
}
.inputTextH,
.inputText {
  font-size: 14px;
  color: #666666;
}
.inputText {
  margin: 0 10px;
  cursor: pointer;
}
/* 个人中心按钮 */
.btnsBox {
  display: inline-block;
  width: 270px;
  height: 100%;
}
.userBtnBox,
.gwcBtnBox {
  width: 123px;
  height: 38px;
  margin-top: 50px;
  margin-right: 20px;
  border: 1px solid #e5e5e5;
  cursor: pointer;
}
.gwcBtnBox {
  margin-right: 0;
  position: relative;
}
.userBtnImg,
.gwcBtnImg {
  margin-right: 10px;
}
.BubbleBox {
  width: 22px;
  height: 22px;
  background: url("../../assets/zfc/气泡.png") 0 0/22px 22px no-repeat;
  position: absolute;
  top: -13px;
  left: 42px;
}
.BubbleTextBox {
  width: 22px;
  height: 19px;
  font-size: 14px;
  color: #ffffff;
}
/* 顶部第三行 */
.indexTopC3Box {
  height: 50px;
  justify-content: flex-start;
}
.fl {
  width: 170px;
  height: 100%;
  cursor: pointer;
  position: relative;
}
.flImg {
  margin-left: 15px;
}
.flBorder {
  width: 1px;
  height: 18px;
  background-color: #e8e8e8;
  position: absolute;
  top: 17px;
  right: 0;
}
/* 分类标签 */
.flTagBox {
  width: 170px;
  background: #ffffff;
  position: absolute;
  top: 50px;
}
.flTagItem {
  width: 168px;
  height: 55px;
  border: 1px solid #efeeec;
  border-top: none;
}
.flTagItem:nth-of-type(1) {
  border-top: 1px solid #efeeec;
}
.flTagItemImg {
  margin-right: 13px;
}
/* 首页标签 */
.tagItem {
  width: 152px;
  height: 100%;
  margin-right: 1px;
  cursor: pointer;
  position: relative;
}
.tagBoxOn {
  color: #ffffff;
  background-color: #f08200;
}
.tagBorder {
  width: 1px;
  height: 18px;
  background-color: #e8e8e8;
  position: absolute;
  top: 17px;
  right: -1px;
}
</style>
